<template>
  <div class="w-full p-5 relative print-style bg-white h-full">
    <div class="flex justify-between w-full text-center items-center pl-60">
      <div class="flex-1 text-center text-[32px]">{{ getSystemConfig('HISNAME') }}</div>
      <BaseBarcode :value="patientInfo.barcode" class="w-60 text-right" />
    </div>
    <div class="text-center text-[22px] font-bold">手术通知单</div>
    <div class="flex items-center justify-between mt-1">
      <div class="flex justify-start">
        <div class="">日期：{{ patientInfo.sssj }}</div>
      </div>
    </div>
    <div class="flex-1 mt-4 text-sm">
      <div class="border border-solid border-b-0">
        <div class="flex w-full h-10">
          <div class="table-border !border-t-0 !border-l-0 w-[50px]">序号</div>
          <div class="table-border !border-t-0 !border-l-0 w-[80px]">床号</div>
          <div class="table-border !border-t-0 !border-l-0 w-[160px]">姓名</div>
          <div class="table-border !border-t-0 !border-l-0 w-[70px]">部位</div>
          <div class="table-border !border-t-0 !border-l-0 w-[120px]">人工晶体型号</div>
          <div class="table-border !border-t-0 !border-l-0 w-[80px]">剩余度数</div>
          <div class="table-border !border-t-0 !border-l-0 flex-1">拟手术名称</div>
          <div class="table-border !border-t-0 !border-l-0 w-[80px]">术前视力</div>
          <div class="table-border !border-t-0 !border-l-0 !border-r-0 flex-1">备注</div>
        </div>
        <div v-for="(itemRow, indexRow) in tableData" :key="indexRow" class="flex w-full h-10">
          <div class="table-border !border-t-0 !border-l-0 w-[50px]">{{ itemRow.xh }}</div>
          <div class="table-border !border-t-0 !border-l-0 w-[80px]">{{ itemRow.ch }}</div>
          <div class="table-border !border-t-0 !border-l-0 w-[160px]">{{ itemRow.brName }}</div>
          <div class="table-border !border-t-0 !border-l-0 w-[70px]">{{ itemRow.bws }}</div>
          <div class="table-border !border-t-0 !border-l-0 w-[120px]">{{ itemRow.rgjtxh }}</div>
          <div class="table-border !border-t-0 !border-l-0 w-[80px]">{{ itemRow.syds }}</div>
          <div class="table-border !border-t-0 !border-l-0 flex-1">{{ itemRow.ssmc }}</div>
          <div class="table-border !border-t-0 !border-l-0 w-[80px]">{{ itemRow.sqsl }}</div>
          <div class="table-border !border-t-0 !border-l-0 !border-r-0 flex-1">{{ itemRow.bz }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getSystemConfig } from '@/utils/systemConfig'

const props = defineProps({
  printData: {
    type: Object,
    default: () => ({})
  }
})

const patientInfo = ref({})
const tableData = ref([])

watch(
  () => props.printData,
  (val) => {
    tableData.value = val?.printData?.detail
    patientInfo.value = tableData.value[0] || {}
  }
)
</script>
<style lang="less" scoped>
.table-border {
  @apply border border-solid  p-1;
}
</style>
